<template>
  <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :title="title" @open="openDialog" @close="closeDialog">
    <el-form v-loading="loading" ref="customerForm" :model="customerForm" :rules="customerRules" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="学员姓名" prop="studentName">
            <el-input v-model="customerForm.studentName" placeholder="请输入学员姓名" auto-complete="off" />
          </el-form-item>
        </el-col>
        <el-col v-if="type=='add' || isPrivate=='1'" :span="12">
          <el-form-item label="联系电话" prop="mobile">
            <el-input v-model="customerForm.mobile" placeholder="请输入联系方式" auto-complete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="customerForm.address" placeholder="请输入家庭住址" auto-complete="off" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户姓名" prop="name">
            <el-input v-model="customerForm.name" auto-complete="off" placeholder="请输入客户姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="与学员关系" prop="relation">
            <el-input v-model="customerForm.relation" placeholder="爸爸，妈妈，本人" auto-complete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户来源">
            <el-select v-model="customerForm.source" placeholder="选择客户来源">
              <el-option 
                v-for="item in sourceArray"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-select v-model="customerForm.gender" placeholder="请选择性别">
              <el-option
                v-for="item in genderArray"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年级">
            <el-select v-model="customerForm.grade" placeholder="请年级">
              <el-option-group
                v-for="group in gradeArray"
                :key="group.label"
                :label="group.label">
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="就读学校" prop="school">
        <el-input v-model="customerForm.school" auto-complete="off" />
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="选项">
            <el-checkbox v-model="introduction" @change="introductionChange">转介绍</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col v-if="introduction" :span="16">
          <el-form-item :rules="[{ required: true, message: '转介绍必须选择学员', trigger: 'blur' }]" prop="introducer">
            <el-select
              v-model="customerForm.introducer"
              :remote-method="searchStudent"
              :loading="searchStudentLoading"
              filterable
              remote
              reserve-keyword
              placeholder="请输入学员姓名">
              <el-option
                v-for="item in introducers"
                :key="item.merchantStudentId"
                :label="item.name"
                :value="item.merchantStudentId" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="submitForm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detail, saveOrUpdateCustomer } from '@/api/customer'
import { listSimpleStudent } from '@/api/student'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增客户'
    },
    merchantCustomerId: {
      type: Number,
      default: 0
    },
    isPrivate: {
      type: String,
      default: 0
    },
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      loading: false,
      searchStudentLoading: false,
      introduction: false,
      introducers: [],
      customerForm: {
        name: '',
        mobile: '',
        address: '',
        merchantCustomerId: 0,
        relation: '',
        studentName: '',
        school: '',
        gender: 0,
        grade: 0,
        source: 10,
        introducer: null,
        oneself: 0,
        // 自己开发的资源
        isPrivate: '0'
      },
      customerRules: {
        name: [{ required: true, message: '请输入客户称呼', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: '^1[0-9]{10}$', message: '手机号格式不正确', trigger: 'change' }
        ],
        relation: [{ required: true, message: '与客户关系必填', trigger: 'blur' }],
        studentName: [{ required: true, message: '学员姓名必须填写', trigger: 'blur' }]
      },
      gradeArray: this.$store.getters.gradeArray,
      genderArray: this.$store.getters.genderArray,
      sourceArray: this.$store.getters.sourceArray
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
    }
  },
  mounted() {
    
  },
  methods: {
    openDialog() {
      console.log('打开新增客户')
      this.customerForm.merchantCustomerId = this.merchantCustomerId
      this.customerForm.isPrivate = this.isPrivate
      if (this.merchantCustomerId) {
        this.loading = true
        detail(this.merchantCustomerId).then(res => {
          this.loading = false
          this.customerForm = res.data
        })
      }
    },
    closeDialog() {
      this.$refs.customerForm.resetFields()
      this.$emit('close', false)
    },
    cancel() {
      this.$refs.customerForm.resetFields()
      this.dialogVisible = false
    },
    submitForm() {
      this.$refs.customerForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.customerForm.isPrivate = this.isPrivate
          saveOrUpdateCustomer(this.customerForm).then(() => {
            this.$message({
              message: '客户信息更新成功',
              type: 'success'
            })
            this.$emit('close', true)
          }).finally(() => {
            this.loading = false
            this.$refs.customerForm.resetFields()
          })
        }
      })
    },
    searchStudent(query) {
      if (query !== '') {
        this.searchStudentLoading = true
        listSimpleStudent(query).then((res) => {
          this.introducers = res.data
        }).finally(() => {
          this.searchStudentLoading = false
        })
      }
    },
    introductionChange() {
      this.customerForm.introducer = null
    },
    oneselfChange(value) {
      if (value === 1) {
        this.customerForm.relation = '自己'
        this.customerForm.studentName = this.customerForm.name
      }
    }
  }
}
</script>

<style scoped></style>
